<template>
	<view>
		<navbar background-color="#9255e0" title="家庭教育者指导师推荐" left-icon="left" color="#FFFFFF"></navbar>
		<view class="listtopcolor">
			<view class="listtopbefore">
				<view class="listitem" v-for="item in dateArray">
					<view style="display: flex;justify-content: center;">
						{{item.split("-")[0] || 'string'}}
					</view>
					<view class="numcircle">
						{{item.split("-")[1] || 'string'}}
					</view>
				</view>
			</view>
		</view>

		<view class="lishow" v-for="(item,index) in teacherslist" :key="item.id" @click="godetail(item.id)">
			<view class="right">
				<!-- #ifdef APP -->
					<image class="img" :src="item.img" mode=""></image>
				<!-- #endif -->
					
				<!-- #ifdef H5 -->
				<img v-lazy="item.img" class="img">
				<!-- #endif -->

			</view>
			<view class="left">
				<view class="name">
					<view style="margin-left: 20rpx;">
						{{item.name}}
					</view>
					<view style="margin-left: 30rpx;">
						认证
					</view>
				</view>
				<view class="detail">
					<view style="margin-left: 20rpx;">
						{{item.school}}
					</view>
					<view style="margin-left:30rpx;">
						专业:{{item.profession}}
					</view>
				</view>
				<view class="content">
					{{item.profile}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import mline from '@/components/common/Lines.vue'
	import navbar from "@/components/uni/uni-nav-bar/uni-nav-bar.vue"
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				teacherslist: [],
				submitvipform: {},
				dateArray: []
			};
		},
		methods: {

			newString(originalString) {
				return `https://zyc618.mynatapp.cc/${originalString}`;
			},
			getteacherdatalist(sit, gra, sub) {
				$http.request({
					url: "/recommendTutors",
					method: "POST",
					data: {
						
					}
				}).then((res) => {
					uni.showToast({
						title: "获取数据中...",
						icon: "none",
						mask: true,
						duration: 500,
						success: () => {
							this.teacherslist = res;
							this.teacherslist.forEach(function(obj) {
								obj.img = `https://zyc618.mynatapp.cc${obj.img}`;
							});
						}
					})
				}).catch(() => {
					uni.showToast({
						title: "失败",
						icon: "error",
						mask: true,
						duration: 2000
					})
				})
			},
			godetail(index) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${index}&submitvipform=${JSON.stringify(this.submitvipform)}`
				})
			},
			calculateDates() {
				const currentDate = new Date();
				const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
				this.dateArray.push(this.formatDate(currentDate, daysOfWeek));
				this.dateArray.push(this.formatDate(this.addDays(currentDate, 1), daysOfWeek));
				this.dateArray.push(this.formatDate(this.addDays(currentDate, 2), daysOfWeek));
			},
			formatDate(date, daysOfWeek) {
				const day = date.getDate().toString().padStart(2, '0');
				const dayOfWeek = daysOfWeek[date.getDay()];

				return `${day}-${dayOfWeek}`;
			},
			addDays(date, days) {
				const result = new Date(date);
				result.setDate(result.getDate() + days);
				return result;
			}
		},
		components: {
			mline,
			navbar
		},
		onLoad(e) {
			
			this.calculateDates();
			this.getteacherdatalist()
		}
	}
</script>

<style lang="scss">
	.listtopcolor {
		background-color: #9255e0;
		height: 250rpx;
		position: relative;
		margin-bottom: 100rpx;
	}

	.listtopbefore {
		position: absolute;

		width: 85%;
		background-color: #FFFFFF;
		left: 50rpx;
		top: 100rpx;
		height: 200rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.listitem {
			.numcircle {
				margin-top: 10rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1rpx solid #b7b7b7;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.lishow {
		margin: 10rpx 10rpx 20rpx 10rpx;
		display: flex;
		border-bottom: 1rpx solid #b7b7b7;
		padding: 10rpx;

		.right {
			width: 30%;
			height: 200rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.left {
			width: 70%;
			font-size: 22rpx;

			.name {
				display: flex;
				margin-top: 10rpx;
			}

			.detail {
				display: flex;
				margin-top: 10rpx;
			}

			.content {
				margin: 20rpx 0 0 20rpx;
				overflow: hidden;
				-webkit-line-clamp: 3;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

	}
</style>